<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .barContainer{
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            direction: row;
        }
        .bar{
            width: 100px;
            height: 50px;
            background-color: pink;
            margin: 10px;
            display: flex;
        }
    </style>
</head>
<body>
    
    <script>
        arr = [123,156,120,210]
        

        barContainer = document.createElement('div')
        barContainer.className = 'barContainer'
        arr.forEach((element, index) => {
            console.log(element, index)
            bar = document.createElement('div')

            bar.style.width = '50px'
            bar.style.height = element + 'px'
            bar.style.backgroundColor = 'pink'
            bar.style.margin = '10px'
            bar.style.display = 'flex' // 设置为 flex 布局
            bar.style.flexDirection = 'column' // 子元素垂直排列
            bar.style.alignItems = 'center' // 子元素水平居中

            // 创建文字元素
            const textTop = document.createElement('div')
            textTop.textContent = element // 设置文字内容为柱子对应的值
            textTop.style.marginTop = '5px' // 设置文字与柱子的间距

            // 将文字元素添加到 bar 元素中
            bar.appendChild(textTop)

            const textDown = document.createElement('h4')
            textDown.textContent = index // 设置文字内容为柱子对应的值
            textDown.style.marginTop = '5px'; // 设置文字与柱子的底部间距
            // 确保文字水平居中
            textDown.style.textAlign = 'center'; 
            bar.appendChild(textDown);

            barContainer.appendChild(bar)
        })
        document.body.appendChild(barContainer)
    </script>
</body>
</html>